<!--
 * @author  hemengxia
 商品设置--选择商家进行搜索
-->
<template>
  <div class="select-goods-by-business-list">
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="visible" title="商家列表" center>
      <section class="content">
        <section class="main-table">
          <el-table
            v-if="type==1"
            v-loading="listLoading"
            :data="list"
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
          >
            <el-table-column prop="shopName" label="商家名称" show-overflow-tooltip />

          </el-table>
          <el-table
            v-else-if="type ==2"
            v-loading="listLoading"
            :data="list"
            style="width: 100%"
          >
            <el-table-column prop="shopName" label="商家名称" show-overflow-tooltip />
            <el-table-column
              label="操作"
              width="250"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="chooseAll(scope.row)">添加所有商品</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </section>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryList } from './api'
import elDragDialog from '@/directive/el-drag-dialog'
import Pagination from '@/components/Pagination'
export default {
  name: 'SelectGoodsByBusinessList',
  directives: { elDragDialog },
  components: { Pagination },
  props: {
    // type ==1 是通过商家名称搜索   ==2，是按商家搜索
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      visible: true,
      listLoading: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**
     * 选择商家
     * @param val
     */
    handleCurrentChange(val) {
      this.$emit('handleSearch', val)
    },
    /**
     * 添加所有商品
     * @param row
     */
    chooseAll(row) {
      this.$emit('chooseAll', row)
    },

    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: 'rgba(247,247,248,1)'
      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        queryList(query).then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.total
          this.listLoading = false
        }).catch(error => {
          this.listLoading = false
          reject(error)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/mixin.scss';

.select-goods-by-business-list {
  position: relative;

  .header-content {
    height: 50px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .total-balance-content {
      font-weight: bold;

      .balance {
        font-size: 18px;
        @include font-color($mainColor);
      }
    }
  }

  /*  .select-goods-by-business-list-inner {
      max-height: calc(100vh - 130px);
      min-height: calc(100vh - 130px);
      position: relative;

      &::after {
        content: '';
        height: 1px;
        background-color: #e2e3e8;
        position: absolute;
        bottom: 0;
        left: -20px;
        right: -20px;
      }
    }*/
}
</style>
